<template>
  <view class="outBox" @click.stop="showInfoBox = false">
    <u-navbar leftText="订单详情" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
      <view class="left-slot" slot="left">
        <u-icon name="arrow-left" color="#fff"></u-icon>
        <text>{{ '订单详情' }}</text>
      </view>
    </u-navbar>
    <view class="bgBox"></view>
    <video :src="videoUrl + '/mp4/1.mp4'" autoplay :controls="false" loop object-fit="cover"></video>

    <view class="content" :style="{
			marginTop:menuHeight + 'px',
		}" @click="">
      <view class="title">
        <image :src="getImgUrl('/order/icon7.png')" mode="widthFix"/>
        <text>等待支付</text>
      </view>
      <view style="position: relative">
        <view class="itemBox">
          <view class="text tit2">
            <view class="textItem">
              <view class="name">
                <text>定台时间</text>
              </view>
              <view class="value value2">
                <text>{{ curTime }}</text>
              </view>
            </view>
          </view>
          <view class="text">
            <view class="textItem">

              <view class="name">
                <view class="myText">
                  <text class="txt">最晚到店时间</text>
                  <image class="iconImg" @click.stop="handleShowInfoBox" :src="`/static/reservation/img2.png`"
                         mode="widthFix">
                  </image>
                </view>
              </view>
              <view class="value">
                <text>{{ curTable.counterNo }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="showInfoBox" :style="{
          background:`url(${baseImgUrl}newTable/daoBg.png)`,
          backgroundSize:'100% 100%',
		  display: showInfoBox ? 'block' : 'none'
				}">
          <view class="tit3">
            <text>到店时间说明：</text>
          </view>
          <view class="text">
            <text>
              工作日订台保留到22：00；节假日订台保留
              到21：30。超时自动取消订台，订金转入电
              子账户（有效期30天）
            </text>
          </view>
        </view>
      </view>

      <view class="itemBox">
        <view class="tit">
          <text>订台信息</text>
        </view>
        <view class="text">
          <view class="textItem">
            <view class="name">
              <text>台号</text>
            </view>
            <view class="value">
              <text>{{ curTable.counterNo }}</text>
            </view>
          </view>
          <view class="textItem">
            <view class="name">
              <text>订台人</text>
            </view>
            <view class="value">
              <text>{{userInfo.nickName}}</text>
            </view>
          </view>
          <view class="textItem">
            <view class="name">
              <text>人数</text>
            </view>
            <view class="value">
              <text>{{ (orderInfo.manNum - 0) + (orderInfo.womenNum - 0) }}人</text>
            </view>
          </view>
          <view class="textItem">
            <view class="name">
              <text>押金金额</text>
            </view>
            <view class="value">
              <text>{{ orderInfo.price }} 元</text>
            </view>
          </view>
        </view>
      </view>
      <view class="btns">
        <view class="btnOut">
          <view class="btn" @click="doPay">
            立即支付
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
import {
  getWXStatusHeight,getImgUrl
} from '@/utils/index.js'


import {
  fixedPricePayApi,
  bindingPricePayApi
} from '../../api/api'

export default {
  data() {
    return {
      // 胶囊的宽度
      barWidth: 0,
      menuHeight: 0,
      // 支付类型 1一口价 2 竞价
      type: 1,
      // 当前日期
      curTime: '',
      curTable: {},
      orderInfo: {},
      payLoading: false,
      videoUrl: this.$videoUrl,
      baseImgUrl: this.$baseImgUrl,
      showInfoBox: false,
	  userInfo:{},
    }
  },
  onLoad(e) {
    let obj = getWXStatusHeight()
    this.barWidth = obj.barWidth + 3
    this.menuHeight = obj.menuHeight
    this.type = e.type

    this.initData()
	this.userInfo = uni.getStorageSync("userInfo")
  },
  methods: {
	  getImgUrl,
    handleShowInfoBox() {
      this.showInfoBox = true
    },
    async doPay() {
      if (this.payLoading) return
      this.payLoading = true

      if (this.type == 1) {
        this.dofixedPricePay()
      } else {
        this.dobindingPricePay()
      }

    },
    // 竞价支付
    async dobindingPricePay() {
      const _this = this
      const orderInfo = uni.getStorageSync("orderInfo")

      const data = {
        "counterDetailId": this.curTable.id, //卡台明细id
        "counterNo": this.curTable.counterNo, //卡台编号
        "arriveMaleNum": orderInfo.manNum, //到店男性人数
        "arriveFemaleNum": orderInfo.womenNum, //到店女性人数
        "isShareTable": orderInfo.isAccept, //是否接受组局
        "biddingPrice": orderInfo.bindingPrice //竞价金额
      }


      const res = await bindingPricePayApi(data)

      if (res.code == 201) {
        const obj = {
          ...res.data,
          package: res.data.packageVal
        }
		console.log(obj,"obj");
        wx.requestPayment({
          ...obj,
          success(res) {
            if (res.errMsg == "requestPayment:ok") {
              _this.getnav('paySuc')
              this.payLoading = false
            }
          },
          fail(err) {
            _this.payLoading = false
          }
        })
      }else if(res.code == 200){
        _this.getnav('paySuc')
      }else{
		  uni.$u.toast(res.msg)
	  }
      this.payLoading = false
    },
    // 一口价支付
    async dofixedPricePay() {
      const _this = this
      const orderInfo = uni.getStorageSync("orderInfo")

      const data = {
        "counterDetailId": this.curTable.id, //卡台明细id
        "counterNo": this.curTable.counterNo, //卡台编号
        "arriveMaleNum": orderInfo.manNum, //到店男性人数
        "arriveFemaleNum": orderInfo.womenNum, //到店女性人数
        "isShareTable": orderInfo.isAccept, //是否接受组局
      }

      const res = await fixedPricePayApi(data)
      const obj = {
        ...res.data,
        package: res.data.packageVal
      }
	  console.log(obj,"obj");
      if (res.code == 200) {
        wx.requestPayment({
          ...obj,
          success(res) {
            if (res.errMsg == "requestPayment:ok") {
              _this.getnav('paySuc')
            }
          },
          fail(err) {
            console.log(err, "err");
          }
        })
      } else {
        _this.getnav('paySuc')
      }
      _this.payLoading = false
    },
    // 初始化数据
    initData() {
      this.curTime = this.getFormattedDate()
      this.curTable = uni.getStorageSync('curTable')
      this.orderInfo = uni.getStorageSync('orderInfo')
    },
    // 获取时间
    getFormattedDate(date = new Date()) {
      let year = date.getFullYear();
      let month = (`0${date.getMonth() + 1}`).slice(-2); // 月份是从0开始的，所以+1，并且保证两位数
      let day = (`0${date.getDate()}`).slice(-2); // 保证日期是两位数
      let weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      let weekDay = weekDays[date.getDay()];

      return `${year}-${month}-${day} ${weekDay}`;
    }
  }
}
</script>

<style lang="scss" scoped>
.myText {
  display: flex;
  align-items: center;

  image {
    margin-left: 14rpx;
  }
}

.iconImg {
  width: 27rpx;
  height: 27rpx;
}

.showInfoBox {
  width: 662rpx;
  box-sizing: border-box;
  padding: 68rpx 50rpx 45rpx;
  position: absolute;
  z-index: 999;
  top: 80%;
  left: 25rpx;
  font-size: 28rpx !important;
  font-weight: 400 !important;

  .tit3 {
    margin-bottom: 32rpx;
    text {
      margin-bottom: 30rpx;
      color: #0FC6C2;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
    }
  }

  .text {
    font-weight: 400;
    color: #FFFFFF;
    line-height: 44rpx;
    text-align: justify;
    font-style: normal;
    margin-bottom: 32rpx;
    display: flex;
    flex-direction: column;

    &:last-child {
      margin-bottom: 0;
    }

    .one {
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  image {
    width: 32rpx;
  }
}

.btns {
  margin-top: 46rpx;
  margin-bottom: 80rpx;

  .btnOut {
    border-radius: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
  }


  .btn {
    font-size: 32rpx;
    text-align: center;
    color: #fff;
    width: 100%;
    height: 110rpx;
    line-height: 110rpx;
    background: #0FC6C2;
    border-radius: 64rpx;
    box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
    position: relative;

    .iconImg {
      width: 32rpx;
      margin-left: 8rpx;
    }

    .myText {
      text {
        font-weight: 600;
        font-size: 36rpx;
        color: #FFFFFF;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }

}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保视频填充整个容器，可能会裁剪视频 */
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.bgBox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}

.btn {
  text-align: center;
  background-color: #76a834;
  border-radius: 20rpx;
  line-height: 80rpx;

  text {
    font-size: 36rpx;
    color: #fff;
    letter-spacing: 8rpx;
  }
}

.itemBox {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 60rpx;
  border: 2rpx solid #283433;
  backdrop-filter: blur(7px);
  padding: 42rpx;
  margin-bottom: 30rpx;

  .text {
    .textItem {
      margin-bottom: 15rpx;
      display: flex;
      justify-content: space-between;
      margin-top: 28rpx;

      &:last-child {
        margin-bottom: 0rpx;
      }

      .name {
        font-weight: 400;
        font-size: 28rpx;
        color: #86909C;
        line-height: 28rpx;
        text-align: left;
        font-style: normal;
      }

      .value {
        font-weight: 400;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 28rpx;
        text-align: left;
        font-style: normal;

        .txt {
          font-weight: 400;
          font-size: 28rpx;
          color: #FFFFFF;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
        }
      }

      .value2 {
        text {
          font-weight: 400;
          font-size: 28rpx;
          color: #FFFFFF;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }

  .borderItem {
    border: 1rpx solid #76a834;
    background-color: rgba(#76a834, .4);
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
    display: flex;
    justify-content: space-between;

    text {
      font-size: 30rpx;
      color: #fff;
    }
  }

  .lastTime {
    color: #76a834;
  }

  .info {
    display: flex;
    font-size: 28rpx;
    margin-bottom: 10rpx;

    text {
      color: #f3f3f3;

      &:nth-child(1) {
        color: #76a834;
        margin-right: 20rpx;
      }
    }
  }

  .tit {
    padding-bottom: 26rpx;
    border-bottom: 2rpx solid #2d2f2d;

    text {
      font-weight: 500;
      font-size: 36rpx;
      color: #FFFFFF;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
    }
  }

  .tit2 {
    padding-bottom: 26rpx;
    border-bottom: 2rpx solid #2d2f2d;

    .textItem {
      margin-top: 0rpx;

    }
  }

}

.title {
  font-weight: 500;
  font-size: 36rpx;
  color: #FFFFFF;
  line-height: 36rpx;
  text-align: center;
  font-style: normal;
  margin-bottom: 56rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 102rpx;

  image {
    width: 204rpx;
    margin-bottom: 32rpx;
  }
}

.content {
  position: relative;
  padding: 20rpx 40rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 9;
}

.left-slot {
  color: #fff;
  display: flex;
  align-items: center;

  image {
    width: 40rpx;
    margin-right: 30rpx;
  }
}

.outBox {
}
</style>
